<template>
  <div class="body" style="margin: 0">
    <div class="background">
      <img
        src="http://likede2-admin.itheima.net/img/background.be4fae7d.png"
        alt=""
      />
    </div>
    <div class="box">
      <img
        class="logoImg"
        src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
        alt=""
      />
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <div class="item">
            <el-form-item prop="loginName">
              <div class="icon">
                <i class="el-icon-mobile-phone"></i>
              </div>
              <el-input
                type="text"
                v-model="ruleForm.loginName"
                autocomplete="off"
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item prop="password">
              <div class="icon">
                <i class="el-icon-lock"></i>
              </div>
              <el-input
                type="password"
                v-model="ruleForm.password"
                show-password
                autocomplete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item prop="code">
              <div class="icon">
                <i class="el-icon-circle-check"></i>
              </div>
              <el-input
                v-model.number="ruleForm.code"
                placeholder="请输入验证码"
              ></el-input>
              <div class="code" @click="CodeFn">
                <img :src="src" alt="" />
              </div>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button style="width: 448px" type="primary" @click="submitForm"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async created () {
    // this.CodeFn()
    this.getRandom()
    // console.log(res)
  },
  data () {
    return {
      ruleForm: {
        loginName: '',
        password: '',
        code: null,
        loginType: 0,
        clientToken: null
      },
      src: '',
      rules: {
        loginName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 登录
    async submitForm () {
      await this.$refs.ruleForm.validate()
      const data = this.ruleForm
      this.$store.dispatch('user/login', data)
    },
    async CodeFn () {
      this.getRandom()
    },
    // 验证码
    getRandom () {
      const urlAlphabet =
        'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLFGQZbfghjklqvwyzrict'
      const nanoid = (size = 32) => {
        let id = ''
        // A compact alternative for `for (var i = 0; i < step; i++)`.
        let i = size
        while (i--) {
          // `| 0` is more compact and faster than `Math.floor()`.
          id += urlAlphabet[(Math.random() * 64) | 0]
        }
        return id
      }
      const res = nanoid()
      this.ruleForm.clientToken = res
      this.src = `http://likede2-admin.itheima.net/likede/api/user-service/user/imageCode/${res}`
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.body {
  background-color: black;
}
.background {
  width: 100vw;
  height: 100vh;
}
img {
  width: 100%;
  height: 100%;
}
.box {
  box-sizing: border-box;
  position: absolute;
  width: 518px;
  height: 388px;
  top: 50%;
  left: 50%;
  margin-top: -194px;
  margin-left: -259px;
  padding: 76px 35px 0;
  background: #fff;
  -webkit-box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
  box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
  border-radius: 10px;
}
.logoImg {
  position: absolute;
  width: 96px;
  height: 96px;
  top: 0;
  transform: translate(-50%, -50%);
  background-color: none !important;
}
</style>

<style lang="less" scoped>
/deep/.el-input__inner {
  padding: 0 40px;
  height: 52px;
  line-height: 52px;
}
.item {
  position: relative;
  .icon {
    position: absolute;
    top: 7px;
    left: 15px;
    z-index: 111;
    color: #c8cbd1;
    font-size: 16px;
  }
}
.el-input {
  height: 52px;
}
.el-button {
  background-color: #6e7be7;
  height: 52px;
}
.code {
  position: absolute;
  width: 130px;
  height: 51px;
  top: 0;
  right: 0;
  // background-color: aquamarine;
  // border: 1px solid red;
}

</style>
